<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        {{ count }}
        <button @click="getCell">通过 ref 获取子组件实例</button>
        <!-- ref 属性不仅可以给 DOM 元素添加标记，还可以给组件添加标记，可以获取到组件实例 -->
        <cell ref="cell"></cell>
    </div>
</body>
<script>

    const Cell = {
        data () {
            return {
                message: '小时候不爱吃饭，导致了现在个子矮，长大了爱吃饭了导致又矮又胖。'
            }
        },
        template: `
            <div> {{ message }} -- <button @click='getApp'>获取父级组件</button> </div>
        `,
        methods: {
            getApp () {
                // console.log(this.$parent);
                // this.$parent 获取父组件实例，可以获取而且可以修改其内容，但是不建议直接操作父组件
                // this.$parent.$parent 可以找到父组件的父组件
                // this.$parent.count = 66666

                // this.$root 获取到根组件
                console.log(this.$root);

            }
        }
    }


    const app = Vue.createApp({
        data () {
            return {
                count: 100
            }
        },
        methods: {
            getCell () {
                console.log(this.$refs);
                this.$refs.cell.message = '床前明月光'
            }
        },
        components: {
            cell: Cell
        }
    })
    app.mount('#app')
</script>

</html>